<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-row>
        <el-col>
          <el-form-item label="新用户体验单" prop="experienceOrderShow">
            <div class="flex-align-center">
              <el-switch v-model="form.experienceOrderShow" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[谨慎开启]</el-link>
                <span class="mgl5">新用户进入首页体验盲盒单，仅限从未下单过的用户，只有一次机会</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="体验单标题名称" prop="experienceOrderName">
            <div class="flex-align-center">
              <el-input v-model="form.experienceOrderName" placeholder="请输入体验单标题名称" maxlength="30" show-word-limit class="width300" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">对应店员的服务内容</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="体验单时长" prop="experienceOrderTime">
            <div class="flex-align-center">
              <el-input-number v-model="form.experienceOrderTime" placeholder="请输入体验单时长" :min="1" :max="60" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[单位：分钟]</el-link>
                <span class="mgl5">（1-60分钟内）</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="体验单金额" prop="experienceOrderAmount">
            <div class="flex-align-center">
              <el-input-number v-model="form.experienceOrderAmount" placeholder="请输入体验单金额" :min="0" :max="100000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[单位：元]</el-link>
                <span class="mgl5">（0元为免费体验）</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="border-bottom mgb15"></div>
      <el-row>
        <el-col>
          <el-form-item label="置顶告白专区" prop="giftShowTopStatus">
            <div class="flex-align-center">
              <el-switch v-model="form.giftShowTopStatus" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">开启后显示最近{{giftRecentDay}}天内打赏金额最高的3个打赏</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="打赏时间显示" prop="giftShowTimeStatus">
            <div class="flex-align-center">
              <el-switch v-model="form.giftShowTimeStatus" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">开启后显将会显示打赏的日期，关闭后不显示</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="礼物打赏低于" prop="giftShowMin">
            <div class="flex-align-center">
              <el-input-number v-model="form.giftShowMin" placeholder="请输入" :min="1" :max="1000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">元，在礼物告白墙不显示</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="礼物打赏显示" prop="giftShowCount">
            <div class="flex-align-center">
              <el-input-number v-model="form.giftShowCount" placeholder="请输入" :min="1" :max="1000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">条记录（设置不超过100条）</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="border-bottom mgb15"></div>
      <el-row>
        <el-col>
          <el-form-item label="店员PK" prop="pkStatus">
            <div class="flex-align-center">
              <el-switch v-model="form.pkStatus" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">开启后，店员将可以发起、接受、加入PK，关闭后正在进行的PK不会立即终止</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="PK时长" prop="pkTime">
            <div class="flex-align-center">
              <el-input-number v-model="form.pkTime" placeholder="请输入" :min="0" :max="1000" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">小时（设置双方PK的时长，时间结束后将会结算）</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="允许跨级PK" prop="pkIsBeyond">
            <div class="flex-align-center">
              <el-switch v-model="form.pkIsBeyond" :active-value="'Y'" :inactive-value="'N'"></el-switch>
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <el-link type="primary" :underline="false">[谨慎开启]</el-link>
                <span class="mgl5">开启后，不同等级之间可以相互PK，默认只能发起或接受同等级的PK</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="PK门槛分值" prop="pkScore">
            <div class="flex-align-center">
              <el-input-number v-model="form.pkScore" placeholder="请输入" :min="0" />
              <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                <span class="mgl5">店员总分值达到该门槛后，才可以发起、接受、加入PK（店员分值：来源客户下单评价，默认0分）</span>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="reset">重 置</el-button>
    </div>

    <!-- 对话框 -->
    <el-dialog title="节日详情" :visible.sync="open" width="800px" :close-on-click-modal="false" append-to-body>
      <el-table :data="dict.type.app_festival_list">
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="节日" prop="raw.dictLabel" min-width="120" />
        <el-table-column label="放假时间" prop="raw.dictData" min-width="100" />
        <el-table-column label="备注" prop="raw.remark" min-width="100" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>

import { getConfigGlobal, saveConfigGlobal } from "@/api/market/configGlobal";
const validateAcquaintance = (rule, value, callback) => {
  if (value < 0 || value > 100) {
    callback(new Error('数字在在 0 至 100之间'))
  } else {
    callback()
  }
}
export default {
  name: 'ConfigGlobal',
  dicts: ['app_festival_list'],
  components: {

  },
  data() {
    return {
      giftRecentDay: 7,
      open: false,
      // 表单参数
      form: {
        shopId: "",
        experienceOrderName: undefined,
        experienceOrderShow: undefined,
        experienceOrderTime: 15,
        experienceOrderAmount: undefined,
        giftShowTopStatus: 'Y',  
        giftShowTimeStatus: 'Y',
        giftShowMin: 0,
        giftShowCount: 10,  
        pkStatus: undefined,
        pkTime: undefined,
        pkIsBeyond: undefined,
        pkScore: undefined,
      },
      // 表单校验
      rules: {
        firstOrderCommissionRate: [
          { required: true, trigger: "blur", message: "请输入续单提成比例(%)" },
          { validator: validateAcquaintance, trigger: 'blur' }
        ],
      }
    }
  },
  mounted(){
    this.init()
    this.getConfigKey("app.gift.recent.day").then(response => {
      this.giftRecentDay = response.msg;
    });
  },
  methods: {
    init(){
      let shopId = '';
      if(process.env.NODE_ENV === 'development'){
        shopId = 'haidiyao'
      }else{
        shopId = window.location.hostname.split(".")[0];
      }
      getConfigGlobal({shopId: shopId}).then(response => {
        let p = {...this.form}
        this.form = {...p, ...response.data}
      });
    },
    // 表单重置
    reset() {
      this.form = {
        shopId: "",
        experienceOrderName: undefined,
        experienceOrderShow: undefined,
        experienceOrderTime: 15,
        experienceOrderAmount: undefined,
        giftShowTop: 1,  
        giftShowMin: 0,
        giftShowCount: 10,  
        pkStatus: undefined,
        pkTime: undefined,
        pkIsBeyond: undefined,
        pkScore: undefined,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          if(process.env.NODE_ENV === 'development'){
            params.shopId = 'haidiyao'
          }else{
            params.shopId = window.location.hostname.split(".")[0];
          }
          saveConfigGlobal(params).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.open = false;
              this.getList();
            });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.width100{
  width: 100px;
}
.width300{
  width: 300px;
}
</style>
